/*
 * @Author: Jimmy
 * @LastModifiedBy: Jimmy
 * @Date: 2024-03-07 20:52:59
 * @LastEditTime: 2025-02-16 20:19:33
 * @FilePath: /monitor_belt/src/components/dictionary_label/index.tsx
 */
import { useEffect, useState } from "react";
import styles from "./index.module.scss";

interface IProps {
  list: Array<IStatus>;
  label: string;
  value: string | number;
  type?: string;
  isDot?: boolean;
  extra?: string;
  status?: string;
  disabled?: boolean;
}

interface IStatus {
  [key: string]: any;
}

export default function DictionaryLabel(props: IProps) {
  let {
    list,
    label = "label",
    type = "value",
    value,
    isDot = false,
    extra,
    status,
  } = props;
  const [showItem, setShowItem] = useState<IStatus | any>({});
  useEffect(() => {
    let findItem = list.find((item) => item[type] == value);
    setShowItem(findItem);
  }, []);
  return (
    <div
      className={[
        styles.statusItem,
        styles[showItem?.status || "off"],
        status,
      ].join(" ")}
    >
      {isDot && <span className={styles.dotItem}></span>}
      <span className={styles.statusName}>
        {showItem?.[label]}
        {extra}
      </span>
    </div>
  );
}
